/* eslint-disable max-len */
/**
 * 页面底部banner及menu处理
 *
 * example:
 * import { withMenu, withBanner, withMenuBanner } from 'wpt';
 * banner: @withBanner
 * menu: @withMenu(['首页', '发布', '消息', '我的'], 0, scrollHide)
 * banner&menu: @withMenuBanner(['首页', '发布', '消息', '我的'], 3, scrollHide)
 */

import React, { Component } from 'react';
import IphonexFit from 'components/IphonexFit';
import BottomSupport from './BottomSupport';
import os from '@packages/lib-os';
// `Menu`现在是全局组件
// import Menu from './Menu';

const defaultMenu = ['首页', '发布', '消息', '我的'];

const compose = (rootElement, elements) => {
    if (!rootElement) {
        return null;
    }
    const style = {
        position: 'relative',
        boxSizing: 'border-box',
        minHeight: '100vh',
        paddingBottom:
            window.screen.availHeight == 812 && window.screen.availWidth == 375 && $.os.ios && !WPT.os.breakingWechat
                ? '94px'
                : '60px',
        ...rootElement.props.style,
    };
    const props = { ...rootElement.props, style };
    return React.cloneElement(rootElement, props, rootElement.props.children, ...elements);
};

function getTitle() {
    if (os.yjPlatform) {
        return '有匠';
    }
    return '微拍堂';
}

function handleClickSupport(url) {
    if (os.dyXcx) {
        return;
    }
    WPT.redirect(url);
}

export const Banner = ({ isEmpty }) => (
    <div
        className="supportBanner"
        style={
            isEmpty
                ? {
                      backgroundColor: '#F8F8F8',
                      position: 'absolute',
                      bottom: 0,
                      left: 0,
                  }
                : { position: 'absolute', bottom: 0, left: 0 }
        }
    >
        <div className={isEmpty ? 'hide' : ''} style={{ backgroundColor: '#F8F8F8', borderTop: '1px solid #eaeae8' }}>
            由&nbsp;
            <span
                onClick={() => {
                    handleClickSupport('//m.weipaitang.com');
                }}
            >
                {`${getTitle()}${['10.105.93.151', '10.143.43.138'].indexOf(WPT.serverIp) != -1 ? '『试』' : ''}`}
            </span>
            &nbsp;免费技术支持
        </div>
    </div>
);

const getDisplayName = (Comp) => Comp.displayName || Comp.name || 'Component';

export const withMenu = (menus = defaultMenu, current, scrollHide, theme) => (WrappedComponent) =>
    class extends WrappedComponent {
        static displayName = `withMenu(${getDisplayName(WrappedComponent)})`;

        render() {
            return compose(super.render(), [
                <Menu key="menu" menus={menus} current={current} scrollHide={scrollHide} theme={theme} />,
            ]);
        }
    };

export const withBanner = (WrappedComponent) =>
    class extends WrappedComponent {
        static displayName = `withBanner(${getDisplayName(WrappedComponent)})`;

        render() {
            return compose(super.render(), [<Banner key="banner" />]);
        }
    };

export const withMenuBanner = (menus = defaultMenu, current, scrollHide, theme) => (WrappedComponent) =>
    class extends WrappedComponent {
        static displayName = `withMenuBanner(${getDisplayName(WrappedComponent)})`;

        render() {
            return compose(super.render(), [
                <Banner key="banner" />,
                <Menu key="menu" menus={menus} current={current} scrollHide={scrollHide} theme={theme} />,
            ]);
        }
    };

/**
 * 微拍堂技术支持
 * @export
 * @class WPTSupport
 * @extends {Component}
 */
export class WPTSupport extends Component {
    static defaultProps = {
        isEmpty: false,
        holder: true,
        marginTop: 10,
    };

    handleClick = () => {
        // app内调用wptAboutView，弹出app信息
        if (WPT.os.wpt && window.wptAboutView) {
            window.wptAboutView();
            return;
        }
        if (WPT.os.dyXcx) {
            return;
        }
        WPT.redirect('https://m.weipaitang.com');
    };

    render() {
        const { isEmpty, holder, marginTop, isSeller } = this.props;

        // 有匠不显示微拍堂技术支持
        if (WPT.os.yjPlatform) {
            return null;
        }

        if (!isSeller) {
            return <BottomSupport {...this.props} />;
        }

        // 不是Navigator的子元素，并且ios微信版版大于6.6.7不渲染，因为有前进后退
        if (!this.props.fromNavigator && os.ios && os.wechat && os.breakingWechat) {
            return null;
        }

        const style = isEmpty
            ? {
                  backgroundColor: '#F8F8F8',
                  position: 'absolute',
                  bottom: 0,
                  left: 0,
              }
            : {
                  position: 'absolute',
                  bottom: 0,
                  left: 0,
              };

        return (
            <div>
                {holder && (
                    <IphonexFit style={{ height: `${84 + marginTop}px` }}>
                        <div style={{ height: `${49 + marginTop}px` }} />
                    </IphonexFit>
                )}
                <div className="supportBanner" style={style}>
                    <div
                        className={isEmpty ? 'hide' : ''}
                        style={{ backgroundColor: '#F8F8F8', borderTop: '1px solid rgba(0, 0, 0, 0)' }}
                    >
                        由&nbsp;
                        <span className="company" onClick={this.handleClick}>
                            {getTitle()}
                        </span>
                        &nbsp;免费技术支持
                    </div>
                </div>
            </div>
        );
    }
}

/**
 * 底部导航
 * @export
 * @class Navigator
 * @extends {Component}
 */
export class Navigator extends Component {
    static defaultProps = {
        showSupport: true, // 是否显示WPT技术支持
        supportProps: {}, // 技术支持的props
        holder: true, // 是否使用占位
        menus: defaultMenu,
        marginTop: 10,
        notice: null,
        isSeller: false,
        holderHeight: '50px',
    };

    render() {
        const {
            menus, // 导航数组
            current, // 导航选中状态
            scrollHide, // 是否滚动隐藏
            theme, // 主题
            isSeller, // 是不是卖家
            notice,
            showSupport,
            supportProps,
            holderHeight,
            menuZIndex,
        } = this.props;

        return (
            <>
                {showSupport && <WPTSupport holder={false} isSeller={isSeller} fromNavigator {...supportProps} />}
                <Menu
                    {...this.props}
                    menus={menus}
                    current={current}
                    scrollHide={scrollHide}
                    theme={theme}
                    isSeller={isSeller}
                    notice={notice}
                    holderHeight={holderHeight}
                    menuZIndex={menuZIndex}
                />
            </>
        );
    }
}
